<template>
    <view class="aa">
        <u-popup mode="bottom" :show="show" @close="close" @open="open">

            <view class="shuju">

                <view class="time">联系人分类</view>
                <view class="btn">
                    <view class="a" :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0">全部线索</view>
                    <view class="a" :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1">我的线索</view>
                    <view class="a" :class="{ active: currentTab === 2 }" @click="switchTab(2)" data-tab="2">下属线索</view>
                    <view class="a" :class="{ active: currentTab === 3 }" @click="switchTab(3)" data-tab="3">已转客户</view>
                    <view class="a" :class="{ active: currentTab === 4 }" @click="switchTab(4)" data-tab="4">公共线索</view>

                </view>
                <view class="time">线索来源</view>
                <view class="btn">
                    <view class="a" :class="{ active: currentTab === 5 }" @click="switchTab(5)" data-tab="5">电话营销</view>
                    <view class="a" :class="{ active: currentTab === 6 }" @click="switchTab(6)" data-tab="6">主动来电</view>
                    <view class="a" :class="{ active: currentTab === 7 }" @click="switchTab(7)" data-tab="7">客户介绍</view>
                    <view class="a" :class="{ active: currentTab === 8 }" @click="switchTab(8)" data-tab="8">朋友介绍</view>
                    <view class="a" :class="{ active: currentTab === 9 }" @click="switchTab(9)" data-tab="9">独立开发</view>
                    <view class="a" :class="{ active: currentTab === 10 }" @click="switchTab(10)" data-tab="10">网络搜索</view>
                    <view class="a" :class="{ active: currentTab === 11 }" @click="switchTab(11)" data-tab="11">广告杂志</view>
                    <view class="a" :class="{ active: currentTab === 12 }" @click="switchTab(12)" data-tab="12">展会促销</view>
                    <view class="a" :class="{ active: currentTab === 13 }" @click="switchTab(13)" data-tab="13">其他途径</view>

                </view>
                <view class="time">线索状态</view>
                <view class="btn">
                    <view class="a" :class="{ active: currentTab === 14 }" @click="switchTab(14)" data-tab="14">初步意向</view>
                    <view class="a" :class="{ active: currentTab === 15 }" @click="switchTab(15)" data-tab="15">下次邀约</view>
                    <view class="a" :class="{ active: currentTab === 16 }" @click="switchTab(16)" data-tab="16">已转客户</view>


                </view>
                <view class="zi">
                    最后修改时间
                </view>
                <view>
                    <view class="xuan"> <img src="/static/img/shijian.png" alt=""
                            style="width: 20px; height: 20px; vertical-align: middle;"> <span @click="time">选择时间范围</span>
                    </view>
                </view>
            </view>
            <view class="sure">
                <button style="color: blue;" @click="close">重置</button>
                <button style="color: white; background-color: blue;" @click="close">确定</button>
            </view>
        </u-popup>

        <span :class="{ active: currentTab === 1 }" @click="show = true" data-tab="1">筛选 <img src="/static/img/shaixuan.png"
                alt="" style="width: 20px; height: 20px; vertical-align: middle;"></span>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};
const show = ref(false);
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}

const time = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaotime'
    })
}
</script>

<style lang="scss">
.sure {
    display: flex;
}

button {
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    border: 1px solid #ccc;
    margin-left: 20px;
    margin-top: 20px;

}

.zi {
    margin-left: 20px;
    margin-top: 20px;
}

.xuan {
    color: #666;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
}

.btn {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
}

.a {
    width: 80px;
    text-align: center;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    margin-left: 10px;
}

.active {
    color: blue;

}

.time {
    padding: 20px 20px;
    color: #666;
}

.zi {
    padding: 20px 20px;
    color: #666;
}

.aa {
    display: flex;
    height: 800px;
}

.shuju {
    width: 300px;
    height: 100%;
    border: 1px solid #ccc;
}

.shai {
    margin-top: 40px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
}


.two_img {
    width: 20px;
    height: 23px;
    vertical-align: middle;
}
</style>